<!DOCTYPE html>
<html>

<head>
  <title>藏宝游戏</title>
</head>

<body>
  <h1 id="heading">藏宝游戏</h1>
  <img id="map" width=400 height=400 src="treasuremap.png">

  <p id="distance"></p>

  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>

  <script>
   //获取随机数
           var getRandomNumber = function(size){
                return Math.floor(Math.random()*size);
           };
           var getDistance = function(event,target){
                var diffx = event.offsetX - target.x;
                var diffy = event.offsetY - target.y;
                disdan=Math.sqrt((diffx*diffx)+(diffy*diffy));
                //console.log(disdan);
                return disdan;
           };
           var getDistanceHint = function(distance){
                if(distance < 10){
                    return "Boiling hot!";
                } else if(distance < 20){
                    return "Really hot";
                } else if(distance < 40){
                    return "Hot";
                } else if(distance < 80){
                    return "Warm";
                } else if(distance < 160){
                    return "Cold";
                } else if(distance < 320){
                    return "Really cold";
                } else {
                    return "Freezing!";
                }
           };
           var width = 400;
           var height = 400;
           var clicks = 0;
           var target = {
                x:getRandomNumber(width),
                y:getRandomNumber(height)
           };
           $("#map").click(function(event){
            clicks++;
            var distance = getDistance(event,target);
            var distanceHint = getDistanceHint(distance);
            $("#distance").text(distanceHint);
            if(distance < 8){
                alert("恭喜你, "+clicks +"步成功找到宝藏");
            }
           });

  </script>

</body>

</html>